<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/vue.js"></script>


</head>
<body>

<div id="app">

    <input type="text" v-model="message">
    <p>{{message}}</p>

    <p>{{reverseMessage}}</p>




</div>


<script>

    // 在模板中把数组每一项x2, 并且过滤小于10的
    /**
     * 计算属性
     *      作用: 把对处理数据的逻辑抽离在计算属性中,使得模板更加轻量易读
     * 定义计算属性
     *      computed
     *
     */

    new Vue({

        el: '#app',
        data: {
            message: 'miaovketang',
            list:[1,2,3,4,5]
        },
        methods: {},
        computed:{
            // 计算属性依赖了data中的数据,data中的数据发生变化,计算属性会重新计算
            reverseMessage(){
                console.log("我执行了一次")
                return this.message.split('').reverse().join('');
            }
        }
    });

</script>


</body>
</html>